<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  const box = document.querySelector(".box");

  move(box, {
    left: 10,
    top: 400
  });

  // 问题：有一个属性到目标，计时器被清除了，有可能其他属性还没到目标

  // 到目标：所有属性到目标，才能清除计时器
  // 没到目标：只要有一个属性没到目标，不能清除计时器 √
    // 言外之意：默认立即清除计时器


  // 多元素多属性不同目标，同时缓冲
  function move(ele, data){
    clearInterval(ele.t);
    ele.t = setInterval(()=>{
      // 4. 初始设定一个立即清除计时器的状态
      let flag = true;
      for(let i in data){
        // 1. 获取当前值
        const now = parseInt(getStyle(ele, i));
        // 2. 计算步长
        let speed = (data[i] - now) / 10;
        speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
        // 3. 改变元素样式（实现动画）
        ele.style[i] = now + speed + "px";
        // 6. 运动过程中，不断判断，是否有属性没到目标
        // 只要有一个属性没到目标，不能清除计时器
        // 破坏初始立即清除计时器的状态
        if(now !== data[i]){
          flag = false;
        }
      }
      // 5. 将来根据指定状态决定是否清除计时器
      if(flag){
        clearInterval(ele.t);
      }
    }, 30);
  }

  function getStyle(ele, attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
  }
  
</script>
</html>